const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
//配置  webpack 功能
module.exports = {
    mode : 'development', //打包模式
    entry : './src/index.js',//配置打包入口文件
    output : { //配置打包出口文件
        path : path.join(__dirname,'build'),//输入文件路径
        filename : 'index.js' //输出文件路径
    },


    module : {
        rules : [
            {
                test : /\.(css|less)$/, //匹配css为后缀的文件
                use :['style-loader','css-loader','less-loader'],//使用这些loader文件

            },
            {
                test:/\.js$/,
                use : 'babel-loader'
            },
            {
                test: /\.(png|jpeg|gif|jpg)$/,
                type: 'asset'
              }
        ]
    }, 

    devServer :{
        port : 2000, //端口
        open : true ,//自动打开浏览器
        hot : true //热更新
    },

    plugins : [ //配置  webpack 插件
        new HtmlWebpackPlugin({ //配置 html 模板，自动打包后的js引入页面中
            template :'./src/index.html',
            filename : 'index.html' //定义输出的文件名称
        }) 
    ] 


}